<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公式设置</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <script src="/static/component/pear/module/ruinuo/sortable.js"></script>
    <script src="/static/component/pear/module/ruinuo/xm-select.js"></script>
</head>
<body>
<div class="view_body">
    <form class="layui-form" action="">
        <div class="ruinuo_box">
            <div class="main-container layui-row layui-col-space10 form_top label_con">

                <fieldset class="layui-elem-field layui-field-title layui-col-xs12">
                    <legend class="tips_legend">显示规则</legend>
                </fieldset>

                <div class="design-box layui-col-xs12 layui-col-md12 field_box">
                    <div class="layui-input-block  block_margin_left_0">
                        <textarea name="show_rule" id="focus_1712541319_7" class="layui-input show_rule" style="display: none"
                                  lay-filter="json_filter"></textarea>
                        <div class="table_1712541319_7 f_table">
                            <table id="table_1712541319_7" lay-filter="filter_1712541319_7"></table>
                        </div>
                    </div>
                </div>

                <fieldset class="layui-elem-field layui-field-title layui-col-xs12">
                    <legend class="tips_legend">显示模板</legend>
                </fieldset>

                <div class="layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label">模板属性</label>
                    <div class="layui-input-block">
                        <select name="type" lay-verify="required" lay-search="" lay-filter="tpl_sx"
                                class="rn_fieldstype layui-input fieldstype_select">
                            <option value="1">自定义</option>
                            <option value="2">图片</option>
                            <option value="3">图标</option>
                            <option value="4">链接</option>
                            <option value="6">附件</option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label">模板设置</label>
                    <div class="layui-input-block">
                        <textarea placeholder="" class="layui-textarea rn_list_tpl" name="tpl"
                                  style="height:200px;"></textarea>
                    </div>
                </div>
            </div>
        </div>

    </form>

</div>

<script>

    let SettingData = {};
    let SeleteData = {};
    let current = 1;
    let raw = '';
    let InitData = {};
    let $ = layui.jquery;
    let field = '';
    layui.use(['form', 'engine_form'], function () {
        init();
    })

    function init() {

        let Config = parent.layui.design_table.GetConfig();
        let current = Config.current || {};
        field = current.field || '';
        let tpl = current.tpl || '';
        $(".rn_list_tpl").val(tpl);
        let show_rule = current.show_rule || '';
        $(".show_rule").val(show_rule) || '[]';
        ShowRule();
        layui.form.on('select(tpl_sx)', function (data) {
            let val = data.value;
            let html = '';
            switch (Number(val)) {
                case 2:
                    html += '{{#  layui.each(layui.engine_table.SplitValue(d.' + field + '), function(index, item){ }}\n';
                    html += '<div class="img_list">\n';
                    html += '<img src="{{= item}}">\n';
                    html += '</div>\n';
                    html += "{{#  }); }}";
                    break;
                case 3:
                    html += '<div class="ico_list">\n';
                    html += '<i class="ruinuo-icon {{= d.' + field + '}}"></i>\n';
                    html += '</div>';
                    break;
                case 4:
                    html += '<div class="url_list">\n';
                    html += '<a class="layui-btn layui-btn-xs rnhref" title="{{= d.' + field + '}}" href="{{= d.' + field + '}}"><i class="layui-icon layui-icon-unlink"></i></a>\n';
                    html += '</div>\n';
                    break;
                case 5:
                    html += '<div class="status_list">\n';
                    html += '<sapn class="color_{{= d.' + field + '}}">{{= d.' + field + '}}</span>\n';
                    html += '</div>';
                    break;
                case 6:
                    html += '{{#  layui.each(layui.engine_table.SplitValue(d.' + field + '), function(index, item){ }}\n';
                    html += '<div class="file_list">\n';
                    html += '<a class="layui-btn layui-btn-xs rnhref" title="{{= item}}" href="{{= item}}"><i class="layui-icon layui-icon-unlink"></i></a>\n';
                    html += '</div>\n';
                    html += "{{#  }); }}";
                    break;
            }
            $(".rn_list_tpl").val(html);
        })
    }

    function SendForm() {

        let show_rule = $("textarea[name='show_rule']").val() || '[]';
        let show_rule_data=eval(show_rule);
        show_rule_data.forEach((item,index)=>{
            delete (item.LAY_NUM)
            delete (item.LAY_INDEX)
        })
        let data = {tpl: $(".rn_list_tpl").val(), show_rule: JSON.stringify(show_rule_data)};
        return data;
    }


    function ShowRule() {

        InitData['source'] = {
            rule_type: {
                rows: [
                    {label: 'tab方式', value: 'tab'},
                    {label: 'url方式', value: 'url'},
                    {label: '用户方式', value: 'user'},
                    {label: '角色方式', value: 'role'},
                    {label: '部门方式', value: 'department'},
                    {label: '租户方式', value: 'tenant'},
                ]
            },
            event_type: {
                rows: [
                    {label: '包含', value: 'in'},
                    {label: '不包含', value: 'notin'},
                ]
            },
        };
        let tablefield = {
            "title": "字段",
            "field": "show_rule",
            "tag": "jsontable",
            "type": "json",
            "required": 1,
            "verify": "json",
            "hide_label": 1,
            "elem_id": "1712541319_7",
            "cols": [
                {
                    "title": "方式",
                    "field": "rule_type",
                    "update": "select",
                    "required": 1,
                    "options": "rule_type",
                },
                {
                    "title": "规则",
                    "field": "event_type",
                    "update": "select",
                    "required": 1,
                    "options": "event_type",
                },
                {
                    "title": "值",
                    "field": "value",
                    "update": "input",
                    "required": 1
                }, {
                    "title": "字段名",
                    "field": "field",
                    "update": "input",
                }
            ],
        };
        layui.engine_form.BindJsonTable(tablefield);
    }

</script>
</body>
</html>

